<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html lang="zh">
<head>
<%@include file="/WEB-INF/jsp/common/header.jsp"%>
<style type="text/css">
.addForm {
	width: 100px;
}
</style>
<script type="text/javascript">
	var orderListTable;
	$(document).ready(function() {
		$("#resetForm").click(function() {
			$("#form input").val("");
		});
		$("#save").click(function() {
			var id = $(".modal-body input[name=id]").val();
            var inputPrice = $(".modal-body input[name=inputPrice]").val();
            var remark = $(".modal-body textarea[name=remark]").val();

            if (!/^[0-9]+(.[0-9]{1,2})?$/.test(inputPrice)) {
                $.messager.alert("价格不能为空且必须大于0");
                return false;
            }
            $('#priceHidden').val((parseFloat(inputPrice) * 100).toFixed(0));
            if (remark.length > 255) {
                $.messager.alert("备注不能超过 255 个字符");
                return false;
            }
			var url = contextpath + "/web/order/update";
            if(id === ''){
                url = contextpath + "/web/order/insert";
            }
			$(this).attr("disabled","disabled");
			$.ajax({
				type : "POST",
				url : url,
				data : $('#editForm').serialize(),
				success : function(result) {
                    $("#save").removeAttr("disabled");
                    if (result.code === 200) {
                        $("#editModal").modal("hide");
                        $.messager.alert("提示", "保存成功");
                        orderListTable.ajax.reload(null, false);
                    } else {
                        $.messager.alert(result.msg);
                    }
				}
			});
		});
        orderListTable = $('#orderListTable').DataTable({
            "bSort": true, //是否启动各个字段的排序功能
            "aaSorting": [[6, "desc"]], //默认的排序方式
            "aoColumns": [
                {
                    "mDataProp": "sn",
                    "sTitle":"订单号",
                    "sDefaultContent": "--",
                    "sWidth": "20%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--') $(nTd).attr('title',sData);
                    }
                },
                {
                    "mDataProp": "roomName",
                    "sTitle":"房间名称",
                    "sDefaultContent": "--",
                    "sWidth": "20%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : true,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--') $(nTd).attr('title',sData);
                    }
                },
                {
                    "mDataProp": "petName",
                    "sTitle":"宠物名称",
                    "sDefaultContent": "--",
                    "sWidth": "15%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : true,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData === '--') {
                            $(nTd).html(oData.userName).attr('title', oData.userName);
                        }else if(!oData.userName){
                            $(nTd).attr('title', sData);
						}else{
                            $(nTd).html(sData + " (" + oData.userName + ")").attr('title', sData + "(" + oData.userName + ")");
						}
                    }
                },
                {
                    "mDataProp": "price",
                    "sTitle":"预约价格",
                    "sDefaultContent": "--",
                    "sWidth": "15%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--') $(nTd).html((sData/100).toFixed(2) + "元");
                    }
                },
                {
                    "mDataProp": "orderDate",
                    "sTitle":"预约时间",
                    "sDefaultContent": "--",
                    "sWidth": "15%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--') {
                            var html = sData.substr(0, 10) + " (" + oData.timeSlot + ")";
                            $(nTd).html(html).attr('title', html);
                        }
                    }
                },
                {
                    "mDataProp": "status",
                    "sTitle":"预约状态",
                    "sDefaultContent": "--",
                    "sWidth": "15%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData === 0){
                            $(nTd).html('无效');
						}else if(sData === 1){
                            $(nTd).html('已预约');
                        }else if(sData === 2){
                            $(nTd).html('已入住');
						}else{
                            $(nTd).html('已离店');
                        }
                    }
                },
                {
                    "mDataProp": "createTime",
                    "sTitle": "下单时间",
                    "sWidth": "15%",
                    "sDefaultContent": "--",
                    "bSortable": true,
                    "sClass": "center flow",
                    "bSearchable": false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if (sData !== '--') $(nTd).attr('title', sData);
                    }
                },
                {
                    "mDataProp": "id",
                    "sTitle": "操作",
                    "sWidth": "80px",
                    "sClass": "center flow",
                    "bSearchable": false,
                    "bSortable": false,
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html("<a class='btn btn-xs btn-default' href='javascript:void(0);' onclick='editRoom(" + iRow + ")'><i class='fa fa-pencil'></i>&nbsp;编辑</a> ");
                            // .append("<a class='btn btn-xs btn-default' href='javascript:void(0);' onclick='deleteOrder(" + iRow + ")'><i class='fa fa-times'></i>&nbsp;删除</a>&nbsp;&nbsp;");
                    }
                }
            ],
            "ajax": {
                url: contextpath + '/web/order/queryPage',
                type:"post",
                data: function(data){
                    $.xDataTablesParams(data, $.trim($('#name').val()));
                    data['search.sn'] = $.trim($('#sn').val());
                    data['search.status'] = $.trim($('#statusSelect').val());

                    return data;
                }
            }
        });

        $('#editModal').on('hide.bs.modal', function () {
            $('#editForm :input').val('');
        });
    });

    function editRoom(row){
        $('#modalTitle').text('处理预约信息');
        var rowData = orderListTable.row(row).data();
        if(!rowData.price) rowData.price = 0;
        $('#editModal :input[name=id]').val(rowData.id);
        $('#editModal :input[name=price]').val(rowData.price);
        $('#editModal :input[name=inputPrice]').val((rowData.price/100).toFixed(2));
        $('#editModal select[name=status]').val(rowData.status);
        $('#editModal :input[name=remark]').val(rowData.remark);
        $('#orderDate').val(rowData.orderDate.substr(0, 10) + " (" + rowData.timeSlot + ")");
        $('#petName').val(rowData.petName);
        $('#editModal').modal('show');
    }

    function deleteOrder(row){
        var rowData = orderListTable.row(row).data();
        $.messager.confirm("确定", "真的要删除该订单吗？", function(){
            $.ajax({
               url : contextpath + '/web/order/delete/' + rowData.id,
               type : 'DELETE',
               success :  function(data){
                   if (data.code === 200) {
                       $.messager.alert("提示", "删除成功");
                       orderListTable.ajax.reload();
                   } else {
                       $.messager.alert(data.msg);
                   }
               }
            });
        });
    }

    function searchTable(){
        orderListTable.ajax.reload();
    }

</script>
</head>
<body>
	<div class="container-fluid">
		<div class="sub-header">
			<h2>房间预约管理</h2>
		</div>
		<br/>
		<form id="form" class="form-inline" role="form" action="#" method="post">
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">订单号</span>
                    <input type="text" class="form-control" id="sn" placeholder="" style="width: 150px;">
                </div>
            </div>
			<div class="form-group">
				<div class="input-group">
					<span class="input-group-addon">宠物名称</span>
					<input type="text" class="form-control" id="name" placeholder="" style="width: 150px;">
				</div>
			</div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">状态</span>
                    <select id="statusSelect" class="form-control" style="width: 150px;">
                        <option value="" selected>全部</option>
                        <option value="0">预约无效</option>
                        <option value="1">已预约</option>
                        <option value="2">已入住</option>
						<option value="3">已离店</option>
                    </select>
                </div>
            </div>
			<button type="button" class="btn btn-default" onclick="searchTable()">查询</button>
		</form>
		<br>
		<div>
			<table class="table table-hover table-striped table-bordered" style="table-layout:fixed;" id="orderListTable"></table>
		</div>
	</div>

	<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg" style="width: 600px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title" id="modalTitle"></h4>
				</div>
				<div class="modal-body">
                    <form id="editForm">
                        <input type="hidden" name="id">
                        <table id="editTable" class="table-hover table table-bordered">
							<tr>
								<td>
									<div class="input-group">
										<span class="input-group-addon">宠物名称</span>
										<input type="text" class="form-control" id="petName" readonly style="width: 320px;">
									</div>
								</td>
							</tr>
							<tr>
								<td>
									<div class="input-group">
										<span class="input-group-addon">预约时段</span>
										<input type="text" class="form-control" id="orderDate" readonly style="width: 320px;">
									</div>
								</td>
							</tr>
							<tr>
								<td>
									<div class="input-group">
										<span class="input-group-addon">预约状态</span>
										<select name="status" class="form-control" style="width: 320px;">
											<option value="0">预约无效</option>
											<option value="1">已预约</option>
											<option value="2">已入住</option>
											<option value="3">已离店</option>
										</select>
									</div>
								</td>
							</tr>
                            <tr>
                                <td>
                                    <div class="input-group">
                                        <span class="input-group-addon">预约价格</span>
                                        <input type="text" class="form-control" name="inputPrice" placeholder="价格" style="width: 320px;">
                                        <input type="hidden" id="priceHidden" name="price">
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="input-group">
                                        <span class="input-group-addon">订单备注</span>
                                        <textarea class="form-control" name="remark" rows="3" placeholder="备注"></textarea>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <button id="save" type="button" class="btn btn-success addForm">保 存</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <button id="closeModal" type="button" onclick="$('#editModal').modal('hide');" class="btn btn-danger addForm">关闭</button>
                                </td>
                            </tr>
                        </table>
                    </form>
				</div>
			</div>
		</div>
	</div>


</body>